<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>中诚学院</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
			<script type="text/javascript" src="../js/lib/remtest.js" ></script>
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/liveapp.css" />
		<style>
			body {
				background: #eeeeee;
				height: 100%;
			}
			
			.hh {
				overflow-y: scroll;
			}
			
			li {
				list-style: none;
			}
			
			.suoltu img {
				/*width: 40% !important;
				height: 40%;*/
				width: 2.2rem !important;
				height: 1.35rem;
				padding-right: 10px;
			}
			
			.mui-content {
				background-color: #eeeeee;
			}
			
			.mui-control-content {
				background-color: #EEEEEE;
				min-height: 215px;
			}
			
			.mui-control-content .mui-loading {
				margin-top: 50px;
			}
			
			#hqtit {
				padding: 6px 15px;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar {
				background-color: #fed700;
			}
			
			.mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item {
				border-bottom: 0px;
			}
			
			.mui-slider .mui-slider-group {
				height: auto;
			}
			
			.mui-slider-indicator {
				position: absolute;
				bottom: 8px;
				width: 100%;
				text-align: center;
				background: #ffff;
			}
			
			.mui-col-xs-2n {
				width: 19.98888%;
			}
			
			.mui-table-view .mui-media-object {
				line-height: 7em;
				max-width: 9em;
				height: 7em;
			}
			
			.mui-card {
				font-size: 14px;
				position: relative;
				overflow: hidden;
				margin: 0px;
				border-radius: 0px;
				background-color: #EEEEEE;
				background-clip: padding-box;
				box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
			}
			
			.suoltu {
				position: relative;
			}
			
			.suoltu .tuneitit {
				position: absolute;
				font-size: 1.5em;
				padding-top: 10%;
				padding-left: 10%;
			}
			
			.mui-media-body .ptit {
				font-weight: bold;
				color: #000000;
				font-size: 0.3rem !important;
				line-height: 0.4rem;
			}
			
			.mui-table-view-cell>a:not(.mui-btn) {
				position: relative;
				display: block;
				overflow: hidden;
				margin: -11px -15px;
				padding: inherit;
				white-space: inherit;
				text-overflow: inherit;
				color: inherit;
			}
			
			.img1 {
				font-size: 0.15rem;
				float: right;
				width: 0.6rem;
				position: absolute;
				bottom: 0.1rem;
				right: 0.1rem;
			
			}
			
			
			.mui-ellipsis{
				font-size: 0.24rem;
			}
			
			.num {
				font-size: 0.18rem;
				font-family: "微软雅黑";
				background: url(../images/play.png) no-repeat left;
				padding-left: 0.27rem;
				height: 0.25rem;
				display: inline-block;
				line-height: 0.3rem;
			}
			
		
			
			
			
		.mui-table-view-cell {
    position: relative;
    overflow: hidden;
    padding: 0.2rem 0.22rem !important;
   
}
			
		#sliderSegmentedControl{
			padding: 0 0.22rem;
		}
			
			
			.mui-segmented-control.mui-scroll-wrapper .mui-control-item {
    display: inline-block;
    width: auto;
    padding: 0;
    border: 0;
}
			
			
			
			
			
			#sliderSegmentedControl a{
				   font-size: 0.24rem;
				  display: inline-block;
				   width: 1rem;
				   margin-left: 0.24rem;
				  
				
			}
			#sliderSegmentedControl a:first-child{
			  margin-left: 0;
			}
			
			#list{
				padding: 0 0.22rem;
				margin-top: 0.2rem;
				padding-top: 0.2rem;
			}
			
				#list li{width: 2.88rem;
				height: 2.3rem !important;
				padding: 0rem !important;
				border-radius: 0.1rem;
				background: #22b5e1;
				margin-bottom: 0.2rem;
				position: relative;
				
			}
			
			#list li:nth-child(even){
				margin-left: 0.2rem;
				}
				.img1{
					background: none !important;
				}  
			.Videotitle {
				font-size: 0.38rem !important;
				color: #FFFFFF !important;
				text-align: center;
				line-height: 0.38rem !important;
				font-weight: bold;
				height: auto !important;
				padding:  0.4rem;
				
				
				
			}
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				color: #ECB714;
			}
		
		</style>
	
	</head>

	<body>
		<!--<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">行情</h1>
		</header>-->
		<div class="mui-content">
			<div id="slider" class="mui-slider">

				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
					<a class="mui-control-item" href="#item1mobile">
						黄金入门
					</a>
					<a class="mui-control-item" href="#item2mobile">
						K线进阶
					</a>
					<a class="mui-control-item" href="#item3mobile">
						战法实操
					</a>

					<a class="mui-control-item" href="#item4mobile">
						投资技巧
					</a>
					<a class="mui-control-item" href="#item5mobile">
						教学视频
					</a>

				</div></div>

				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-2n"></div>

				<div class="mui-slider-group" id="sliderA">
				</div>

				<!--模板、-->

				<div id="itemModel" style="display: none;">

					<div class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<div class="mui-loading">
									<div class="mui-spinner">
									</div>
								</div>

								<ul class="mui-table-view">

								</ul>

							</div>
						</div>
					</div>

				</div>

				<!--文章列表模板-->
				<div id="liModel" style="display: none;">
					<div class="mui-card">
						<div class="mui-card-content">
							<div class="mui-card-content-inner">

								<li class="mui-table-view-cell mui-media">
									<a href="javascript:;" onclick="openWindowWithTitle('newsneiy.html?id=${id}','中诚学院')">
										<div class="suoltu">
											<img class="mui-media-object mui-pull-left" src="http://www.99990158.com${cb:img_url}">
											<p class="tuneitit"></p>
										</div>

										<div class="mui-media-body">
											<p class="ptit">${cb:title}</p>

											<p class='mui-ellipsis'>${cb:zhaiyao}
											</p>
										</div>
									</a>
								</li>

							</div>
						</div>
					</div>

				</div>
				<!--视频教学-->
				<div id="vModel" style="display: none;">
					<li id='${id}' vurl="http://www.99990158.com${video_src}" class="mui-table-view-cell mui-media mui-col-xs-6 Videotitle" onclick="vPlay('http://www.99990158.com${video_src}','http://www.99990158.com${img_url}','${title}')">
						<a href="#" vurl="http://www.99990158.com${video_src}">
							
							<div class="mui-media-body Videotitle">${title}</div>
							
							
							
						
							
							
						</a>
							<div class="img1"><!--<img class="img2" src="../images/play.png">--><span class="num">${click}</span></div>
					</li>

				</div>

				<!--模板结束-->
			</div>

		</div>
		<script type="text/javascript" src="../js/lib/template.js"></script>
		<script type="text/javascript" src="../js/Common.js"></script>
		<script src="../js/mui.min.js"></script>
		<script>
			mui.init();
			var winWidth = 0;
			(function($) { 
				 
				document.getElementById('sliderA').style.height=getWinHeight()-55+'px';
				//动态获取中诚学院的子类
				var lis = [];
				var sliderA = document.getElementById('sliderA');

				var contentModel = document.getElementById('liModel');
				$.getJSON('http://www.99990158.com/ajax/GetCategory.aspx', {
					pid: 0,
					channel: 'edu'
				}, function(data) {
					if(!data) {
						return;

					} else {
						document.getElementById('sliderSegmentedControl').innerHTML = '';
					}

					$.each(data, function(index, item) {
						if(index >= 5) return false;

						//分类导航
						var c = document.createElement('a');
						c.className = 'mui-control-item';
						c.href = '#item' + item.id;
						c.innerText = item.title;

						document.getElementById('sliderSegmentedControl').appendChild(c);

						//第一步  先创建对应的内容区域 
						/*<div class="mui-scroll-wrapper">
							<div class="mui-scroll">*/

						var newDiv = document.createElement('div');
						newDiv.setAttribute('id', 'item' + item.id);
						newDiv.className = 'mui-slider-item mui-control-content';
						//newDiv.className = 'mui-slider-item mui-control-content mui-active';
						var wrapper = document.createElement('div');
						wrapper.className = "mui-scroll-wrapper hh  mui-fullscreen";
						var scrool = document.createElement('div');
						scrool.className = "mui-scroll";
						wrapper.appendChild(scrool);
						newDiv.appendChild(wrapper);
						if(index == 0)
							newDiv.className += ' mui-active';
						//newDiv.innerText = JSON.stringify(item);
						if(index == 4) {
							/*var v_iframe = document.createElement('iframe');
							v_iframe.src = 'video.html';
							v_iframe.style.width = '100%';
							newDiv.appendChild(v_iframe);*/
						}
						sliderA.appendChild(newDiv);

					});

					//阻尼系数
					var deceleration = mui.os.ios ? 0.003 : 0.0009;
					$('.mui-scroll-wrapper').scroll({
						bounce: false,
						indicators: true, //是否显示滚动条 
						deceleration: deceleration
					});

					//点击事件
					document.getElementById('slider').addEventListener('slide', function(e) {
						var cid = sliderA.childNodes[e.detail.slideNumber + 1].id.replace('item', "");
						 

						if(e.detail.slideNumber === 4) {
							
							 
							getVideo(cid);
							//openWindowWithTitle('video.html', '视频教学');
						} else {

							getHtml(cid);
						}
					});

					//获取第一个区域的文章列表
					var cid = data[0].id;
					if(!document.getElementById('item' + cid)) {
						return;
					}

					getHtml(cid);

				});

				function getHtml(cid) {

					if(document.getElementById('item' + cid).innerText) {
						return;
					}
					var t = contentModel.innerHTML;
					$.getJSON('http://www.99990158.com/ajax/GetArticlePageList.aspx', {
						page: 1,
						size: 1001,
						cid: cid,
						channel: 'edu',
						sort: 'add_time desc'
					}, function(res) {

						//加载数据 参数解释(模板，数据数量，回调函数[可以不传])；

						var res = tmpl(t, res.data, tmpl_count(res.data), tmpCallBack);
						 
						document.getElementById('item' + cid).querySelector('.mui-scroll').innerHTML = res;

					});
				}

				function getVideo(cid) {
					 
					if(document.getElementById('item' + cid).innerText) {
						return;
					}console.log(cid);
					var t = document.getElementById('vModel').innerHTML;

					mui.getJSON('http://www.99990158.com/ajax/GetArticlePageList.aspx', {
						page: 1,
						size: 2000,
						cid: 119,
						channel: 'edu',
						sort: 'add_time desc'
					}, function(res) {

						//加载数据 参数解释(模板，数据数量，回调函数[可以不传])；

						var html = tmpl(t, res.data, tmpl_count(res.data));

						document.getElementById('item' + cid).querySelector('.mui-scroll').innerHTML = '<ul id="list" class="mui-table-view mui-grid-view" style="cursor: pointer">' + html + '</ul>';
					
						//颜色
						var colors=['#22b5e1','#f39801','#8a57a2','#00736e','#eb6876','#4489ca'];
						var colorIndex=0;console.log(colorIndex);
						
						 
						mui.each(res.data,function(index,item){
							 
							if(colorIndex>=colors.length)
								colorIndex=0;
							 
							document.getElementById(item.id).style.background=colors[colorIndex];
							colorIndex+=1;
							
						});
						
					});

				}

				var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');
				$('.mui-input-group').on('change', 'input', function() {
					if(this.checked) {
						sliderSegmentedControl.className = 'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-' + this.value;
						//force repaint
						sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
					}
				});
			})(mui);
			//下面的方法可以写为公共的方法
			function isNull(value) {
				if(value == null || value == "" || value == "undefined" || value == undefined || value == "null" || value == "(null)" || value == 'NULL' || typeof(value) == 'undefined') {
					return false;
				} else {
					value = value + "";
					value = value.replace(/\s/g, "");
					if(value == "") {
						return false;
					}
					return true;
				}
			}

			function substrC(str, len) {

				if(str.length > len) {

					return str.substr(0, len) + '...';

				} else {
					return str;
				}
			}

			function tmpCallBack(a, b) {

				switch(b[1]) {
					case "title":
						return substrC(a.title, 20);
						break;
					case "zhaiyao":
						return substrC(a.zhaiyao, 24);

						break;

					case "img_url":
						/*return a.img_url;
						break;*/

						//匹配图片（g表示匹配所有结果i表示区分大小写）
						var imgReg = /<img.*?(?:>|\/>)/g;
						//匹配src属性
						var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;

						if(!a.content.match(imgReg)) {
							return a.img_url;
						}
						var img = a.content.match(imgReg)[0];
						if(img) {
							var src = img.match(srcReg)[1];

							return src;

						} else {
							return a.img_url;
						}
						break;

					default:

						break;
				}
				return '';
			}

			//播放视频
			function vPlay(url, img, title) {

				console.log(url);
				openWindowWithTitle('vplay.html?url=' + url + '&img=' + img, "" + title);
				return;

				var Intent = plus.android.importClass("android.content.Intent");
				var Uri = plus.android.importClass("android.net.Uri");
				var main = plus.android.runtimeMainActivity();
				var intent = new Intent(Intent.ACTION_VIEW);
				var uri = Uri.parse('http://live.99990158.com:809/黄金为什么能避险_clip.mp4');
				intent.setDataAndType(uri, "video/*");
				main.startActivity(intent);

				return;

				if(flvjs.isSupported()) {
					var videoElement = document.getElementById('videoElement');
					var flvPlayer = flvjs.createPlayer({
						type: 'flv',
						url: 'http://live.99990158.com:809/黄金为什么能避险_clip.mp4'
					});
					flvPlayer.attachMediaElement(videoElement);
					flvPlayer.load();
					flvPlayer.play();
				}
			}
		</script>

	</body>

</html>